<template>
	<view>
		<view class="positioningbox">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item class="swiper-item" v-for="(item, index) in imgbox" :key="index" @click="tourl(item)">
						<image mode="aspectFill" :src="item.img"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="searcherbox">
				<view class="input">
					<view class="imgbox">
						<image src="../../static/ss.png"></image>
					</view>
					<input v-model="keyword" maxlength="35" placeholder="搜索名称" />
					<view class="but" @click="ss()">
						搜索
					</view>
				</view>
			</view>
			<!-- <view class="navtit">
				<view class="classifylist" v-for="(item, index) in classifylist" :key="index"
					@click="changepopup(item, index)">
					<view class="textbox">{{ item.title }}</view>
					<image v-if="navindex == index" :src="item.imged"></image>
					<image v-else :src="item.img"></image>
				</view>
			</view> -->
			<modal :show="addressShow">
				<Vaddress :last-level="3" @select="setAddress"></Vaddress>
			</modal>
		</view>

		<view style="height: 450rpx;"></view>
		<view class="listbox" v-for="(item, index) in list" :key="index" @click="todetail(item, index)">
			<view class="listinfo">
				<view class="leftbox">
					<image mode="aspectFill" v-if="item.img" :src="item.img.split(',')[0]"></image>
					<view v-if="item.is_points_gift == 1"
						style="position: absolute;right: 10rpx;top: 10rpx;padding: 4rpx 10rpx;background-color: #f09a73;color: white;border-radius: 10rpx;font-size: 24rpx;">
						送积分</view>
				</view>
				<view class="rightbox">
					<view class="namebox">{{ item.activity_name }}</view>
					<view class="placebox">
						<image src="../../static/dw.png"></image>
						<view>{{ item.address }}</view>
					</view>
					<view class="placebox">
						<image src="../../static/time.png"></image>
						<view>时间: {{ dateFormat(item.start_time) }}</view>
					</view>
					<!-- <view class="placebox">
						<image src="../../static/dw.png"></image>
						<view>{{ item.community_name || '南昌' }}</view>
					</view> -->
				</view>
			</view>
			<view class="infobut" @click.stop="todetail(item, index)" :style="{
				opacity:overflowTime(item.end_time)?0.5:1
			}">
				{{overflowTime(item.end_time)?'活动已结束':'活动报名'}}
			</view>
		</view>
		<kong v-if="!list.length && !loading"></kong>
		<!-- 顶部弹窗 -->
		<uni-popup ref="popup" type="top" background-color="#fff">
			<view class="tiptype">
				<view class="boxitem">
					<view class="itembox" v-for="(item, index) in tiptypelist" :key="index"
						@click="changebx(item, index)"
						:style="{ 'color': index == cate_id ? '#FFF' : '', 'border': index == cate_id ? '2rpx solid #FF8A9B' : '', 'background': index == cate_id ? ' #FF8A9B' : '' }">
						{{ item.name }}
					</view>
				</view>
			</view>
		</uni-popup>
		<tarbar :actbar="actbar"></tarbar>
	</view>
</template>

<script>
	import modal from "../../pages/goodscourses/components/modal.vue"
	import Vaddress from "../../pages/goodscourses/components/address.vue"
	import kong from '../../components/kong.vue'
	import tarbar from "../../components/tabbar.vue"
	export default {
		components: {
			Vaddress,
			modal,
			kong,tarbar
		},
		data() {
			return {
				actbar: 0,
				classifylist: [
					// {
					// 	img: '../../static/xu3.png',
					// 	imged: '../../static/xu33.png',
					// 	title: ''
					// },
					{
						img: '../../static/xu1.png',
						imged: '../../static/xu2.png',
						title: '最热'
					},
					{
						img: '../../static/xu1.png',
						imged: '../../static/xu2.png',
						title: '最新'
					}
				],
				tiptypelist: [],
				cate_id: '',
				navindex: null,
				hot: null,
				new: null,
				page: 1,
				list: [],
				address: {},
				community_id: '',
				is_data: true,
				longitude: '',
				latitude: '',
				imgbox: [],
				keyword: '',
				addressShow: false,
				area_id: '',
				loading: false,
				latitude: '',
				longitude: '',
				config:{}
			}
		},
		async onLoad() {
			// await this.getplace()
			// await this.getcommunity()
			this.getlist()
			this.getimg()
			this.getmyinfo()
		},
		onReachBottom() {
			this.is_data && this.getlist()
		},
		methods: {
			getmyinfo() {
				this.$http({
					url: '/api/Course/user_info',
				}).then(res => {
					this.config = res.data.config
					console.log(this.config)
				})
			},
			overflowTime(end_time) {
				return Date.parse(new Date()) > end_time * 1000
			},
			setAddress(e) {
				this.page = 1
				this.list = []
				this.community_id = e.id
				this.address = e
				this.is_data = true
				this.hideAddress()
				this.getlist()
			},
			showAddress() {
				if (this.addressShow) {
					this.hideAddress()
					return
				}
				this.addressShow = true
			},
			hideAddress() {
				this.addressShow = false
			},
			getplace() {
				let that = this
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							that.longitude = res.longitude
							that.latitude = res.latitude
							// that.getcommunitys(res.longitude, res.latitude)
							resolve()
						}
					});
				})
				// this.getcommunity(this.longitude, this.latitude)
			},
			async getcommunitys() {
				await this.$http({
					url: '/api/Activity/community_list',
					data: {
						lat: this.latitude,
						long: this.longitude
					}
				}).then(res => {
					// if (res.data.length) {
					// this.address = res.data[0]
					// }
				})
			},
			//获取列表
			getlist() {
				uni.showLoading({

				})
				let param = {
					limit: 15,
					page: this.page,
					community_id: this.community_id || '', //社区id
					hot: this.hot || '', //最热排序（空为默认排序1为最热）
					new: this.new || '', //最新排序（空为默认排序1为最新）
					keyword: this.keyword || '',
				}
				if (!this.community_id) {
					param.latitude = this.latitude,
						param.longitude = this.longitude
				}
				this.loading = true
				this.$http({
					url: '/api/Activity/index',
					data: param
				}).then(res => {
					if (res.data.length) {
						this.list.push(...res.data)
						this.page++
						return
					}
					this.is_data = false
				}).finally(() => {
					this.loading = false
					uni.hideLoading()
				})
			},
			ss() {
				this.page = 1
				this.list = []
				this.is_data = true
				this.getlist()
			},
			getcommunity() {
				this.$http({
					url: '/api/Activity/community',
					data: {
						limit: 9999,
						page: 1
					}
				}).then(res => {
					this.tiptypelist = res.data
					this.tiptypelist.unshift({
						id: '',
						name: "全部社区",
						status: 1
					})
				})
			},
			changepopup(item, index) {
				// if (index == 0) {
				// 	if (this.navindex == index) {
				// 		this.navindex = null
				// 		// this.$refs.popup.close()
				// 		this.hideAddress()
				// 	} else {
				// 		this.showAddress()
				// 		// this.$refs.popup.open('top')
				// 		this.navindex = index
				// 	}
				// }
				if (index == 0) {
					if (this.navindex == index) {
						this.navindex = null
						// this.hot = false
						this.hot = !this.hot
					} else {
						this.hot = !this.hot
						this.navindex = index
					}
					this.page = 1
					this.list = []
					this.is_data = true
					this.getlist()
					this.$refs.popup.close()

				}
				if (index == 1) {
					if (this.navindex == index) {
						this.navindex = null
						// this.new = false
						this.new = !this.new
					} else {
						this.new = !this.new
						this.navindex = index
					}
					this.$refs.popup.close()
					this.page = 1
					this.list = []
					this.is_data = true
					this.getlist()
				}
				console.log(this.navindex, this.hot, this.new)
			},
			changebx(item, index) {
				this.cate_id = index
				this.community_id = item.id
				this.address.name = item.name
				this.page = 1
				this.list = []
				this.is_data = true
				this.getlist()
				this.$refs.popup.close()
			},
			todetail(item, index) {
				uni.navigateTo({
					url: '/pages/actinfo/actinfo?id=' + item.id
				})
			},
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			//获取轮播图
			getimg() {
				this.$http({
					url: '/api/Activity/banner_list',
					data: {
						type: 4, //1首页轮播图2商城轮播图3课程轮播图4活动轮播图5老师轮播图 6新闻中心 selectcommunity
					}
				}).then(res => {
					this.imgbox = res.data
				})
			},
			tourl(item) {
				console.log(item.url)
				// console.log(item.url)
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.positioningbox {
		position: fixed;
		top: 0;
		z-index: 99999999;
		width: 750rpx;
		height: 450rpx;
		background-color: #FFF;

		.uni-margin-wrap {
			width: 750rpx;
			height: 300rpx;

			.swiper {
				height: 300rpx;

				.swiper-item {
					display: block;
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;

					image {
						height: 300rpx;
						width: 100%;
					}
				}
			}
		}

		.searcherbox {
			width: 690rpx;
			padding: 0 30rpx;
			background-color: #FFF;
			height: 75rpx;

			.input {
				width: 690rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				opacity: 1;
				border: 2rpx solid #E2E2E2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 35rpx;

				.imgbox {
					width: 74rpx;
					text-align: center;

					image {
						width: 33rpx;
						height: 28rpx;
					}
				}

				>input {
					width: 500rpx;
					line-height: 70rpx;
					font-size: 28rpx;
				}

				.but {
					width: 112rpx;
					height: 70rpx;
					background: #FF8A9B;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #F7F7F7;
					text-align: center;
					line-height: 70rpx
				}
			}
		}

		.navtit {
			width: 750rpx;
			height: 84rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-around;

			.classifylist {
				width: 250rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;

				.textbox {
					max-width: 220rpx;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				image {
					width: 14rpx;
					height: 30rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	.listbox {
		width: 690rpx;
		padding: 0 30rpx 20rpx 30rpx;
		// height: 326rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;

		.listinfo {
			height: 218rpx;
			border-bottom: 2rpx solid #ECECEC;
			display: flex;
			align-items: center;

			.leftbox {
				width: 190rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				position: relative;

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.rightbox {
				width: 500rpx;

				.namebox {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.placebox {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #555555;
					display: flex;
					align-items: center;
					margin-top: 18rpx;

					image {
						width: 24rpx;
						height: 26rpx;
						margin-right: 14rpx;
					}

					>view {
						width: 460rpx;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.infobut {
			width: 630rpx;
			height: 68rpx;
			background: #FF8A9B;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 68rpx;
			// margin-top: 20rpx;
			margin: 20rpx auto 0 auto;
		}
	}

	.tiptype {
		width: 100%;
		padding-top: 542rpx;
		background-color: #FFF;

		.boxitem {
			display: flex;
			flex-wrap: wrap;
			width: 690rpx;
			padding: 40rpx 30rpx;

			.itembox {
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #999999;
				line-height: 72rpx;
				width: fit-content;
				padding: 0 50rpx;
				margin-right: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>